<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字游戏</title>
</head>
<body>
    <button id="reset">重新开始一局游戏</button><br>
    请输入要猜的数字: <input type="text" id="guessNumer"><input type="button" value="猜" id="guess"><br>
    已经猜的次数: <span id="count">0</span> <br>
    结果: <span id="result"></span>

    <script src="jquery-3.7.1.min.js"></script>
    <script>
        //生成随机数 1-100
        let rightNumer = Math.floor(Math.random() *100) +1;
        console.log(rightNumer);
        let count = 0;
        
        $("#guess").click(function(){
            //猜的次数
            count++;
            $("#count").text(count);

            //猜的结果
            let guessNumer = $("#guessNumer").val();
            if(guessNumer>rightNumer){
                $("#result").text("猜大了");
                $("#result").css("color", "red");
            }else if(guessNumer<rightNumer){
                $("#result").text("猜小了");
                $("#result").css("color", "red");
            }else{
                $("#result").text("猜对了");
                $("#result").css("color", "green");
            }
            
        });
        $("#reset").click(function(){
            rightNumer = Math.floor(Math.random() *100) +1;
            console.log(rightNumer);
            count = 0;
            $("#guessNumer").val("");
            $("#result").text("");
            $("#count").text(count);
        });
    </script>
</body>
</html>